<template>
	<div class="binding">
		<div class="head">
			<router-link tag="div" to="/security" class="rou"><</router-link>
			<div class="zl">手机绑定</div>
		</div>
		<div class="con">
			<div><input type="text" placeholder="请输入手机号"/></div>
			<div>
				<input type="text" />
				<div class="abs">获取验证码</div>
			</div>
		</div>
		<div class="bot">
			<div class="co">手机号便于登录，成功后，请使用新手机号登录</div>
			<div class="btn">确定</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"binding",
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="less">
	.binding{
		.head{
			background: #3AAE95;
			overflow: hidden;
			height: 50/50rem;
			line-height: 50/50rem;
			div{
				float: left;
				font-size: 20/50rem;
				color:#fff;
			}
			.rou{
				margin-left: 10/50rem;
			}
			.zl{
				margin-left: 130/50rem;
			}
			.sx{
				margin-left: 80/50rem;
			}
		}
		.bot{
			margin-top: 30/50rem;
			margin-left: 20/50rem;
			.co{
				color: #757575;
				font-size: 16/50rem;
			}
			.btn{
				width: 330/50rem;
				height: 88/50rem;
				background: #3AAE95;
				height: 50/50rem;
				text-align: center;
				line-height: 50/50rem;
				font-size: 16/50rem;
				color: #fff;
				border-radius: 10/50rem;
				margin-top: 30/50rem;
			}
		}
		.con{
			div{
				background: #fff;
				margin-top: 20/50rem;
				position: relative;
				input{
					width: 100%;
					height: 20/50rem;
					font-size: 16/50rem;
					padding-left: 10/50rem;
				}
				div{
					font-size: 16/50rem;
					position: absolute;
					top: -10/50rem;
					right: 10/50rem;
					border: 2/50rem solid #3AAE95;
					padding: 10/50rem 10/50rem;
					text-align: center;
					color:#3AAE95;
					border-radius: 20/50rem;
					height: 20/50rem;
					line-height: 20/50rem;
				}
			}
		}
	}
</style>